Equalize
A jQuery plugin for equal dimensions.
Demo
Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Min Width
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Children
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus.
Use
Main
equalize.js
equalize.css
Dependencies
core.js
mediaquery.js
Basic
By default, Equalize will set the height of an element's children to the largest of the group:
$(".target").equalize();
<div class="target">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
Targets
Specify a valid target
selector to equalize specific child elements:
$(".target").equalize({
target: ".child"
});
<div class="target">
<div>
<p class="child">...</p>
</div>
<div>
<p class="child">...</p>
</div>
<div>
<p class="child">...</p>
</div>
</div>
Width
Set the protperty
to width to Equalize the widths of elements, rather than heights:
$(".target").equalize({
property: "width"
});
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-equalize-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
maxWidth |
string |
'Infinity' |
Width at which to auto-disable plugin |
minWidth |
string |
'0' |
Width at which to auto-disable plugin |
property |
string |
"height" |
Property to size; 'height' or 'width' |
target |
string |
null |
Target child selector |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
defaults
Extends plugin default settings; effects instances created hereafter.
$.equalize("defaults", { ... });
Parameters
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
New plugin defaults |
destroy
Removes plugin instance.
$(".target").equalize("destroy");
disable
Disables instance of plugin
$(".target").equalize("disable");
enable
Enables instance of plugin
$(".target").equalize("enable");
CSS
Class | Type | Description |
---|---|---|
.fs-equalize-element |
element |
Target Element |